<template>
  <view class="overture">
    <view class="head" :style="{ height: `${headHeight}px` }">
      <view
        class="capsule-box"
        :style="{
          width: `${capsuleBoxWitdh}px`,
          height: `${capsuleBoxHeight}px`,
          marginBottom: `${capsuleRightInterval}px`,
        }"
      ></view>
    </view>
    <view class="body" :style="{ height: `${bodyHeight}px`, transform: `translateX(${-1 * rpxToPx(6)}px)` }">
      <view class="game-content" :style="{ marginBottom: `${2 * capsuleRightInterval}px` }">
        <view
          class="grid-box"
          :style="{
            width: `${gridBoxWidth}px`,
            height: `${gridBoxHeight}px`,
            marginRight: `${capsuleRightInterval}px`,
            transform: `translate(${gridHorizontal}rpx,${gridDown}rpx)`,
            transition: `${gridTrans}`,
          }"
        >
          <view v-for="(gItem, gIndex) in grid" :key="gIndex" :style="{ backgroundColor: gItem.color }"></view>
        </view>
        <view class="grid-right" :style="{ width: `${prophetGridBoxWidth}px`, height: `${gridBoxHeight + rpxToPx(14)}px` }">
          <view class="prophet" :style="{ height: `${prophetGridBoxHeight}px`, marginBottom: `${capsuleRightInterval}px` }">
            <view v-for="(gItem, gIndex) in prophetGrid" :key="gIndex" :style="{ backgroundColor: gItem.color }"></view>
          </view>
          <view class="data" :style="{ paddingBlock: `${capsuleRightInterval}px`, marginBottom: `${capsuleRightInterval}px` }">
            <view class="title">等 级</view>
            <view class="content" :style="{ marginBottom: `${capsuleRightInterval}px` }">{{ level }}</view>
            <view class="title">分 数</view>
            <view class="content score" :style="{ marginBottom: `${capsuleRightInterval}px` }">{{ score }}</view>
            <view class="title">时 间</view>
            <view class="content">{{ minute }} : {{ second }}</view>
          </view>
          <view class="ad" :style="{ paddingBlock: `${capsuleRightInterval}px`, marginBottom: `${capsuleRightInterval}px` }"></view>
          <strong v-if="start !== 0" class="game-btn" @tap="reGame">重 来</strong>
          <strong v-if="!isOver" class="game-btn" :style="{ marginTop: `${capsuleRightInterval}px` }" @tap="tapStart">{{ startBtnName }}</strong>
        </view>
      </view>
      <view class="cmd" :style="{ width: `${gridBoxWidth + prophetGridBoxWidth + rpxToPx(25)}px`, paddingBottom: `${capsuleRightInterval}px` }">
        <view class="cmd-btn" @tap="tapLeft">◀︎</view>
        <view class="cmd-btn" @tap="tapRight">▶︎</view>
        <view class="cmd-btn" @tap="tapTurn">♻︎</view>
        <view class="cmd-btn" @tap="tapDown">▼</view>
        <view class="cmd-btn" @tap="tapDownNow">⬇︎</view>
      </view>
    </view>
    <view class="tail" :style="{ height: `${tailHeight}px` }"></view>
  </view>
</template>

<script setup lang="ts">
  import { onLoad, onShow, onHide } from '@dcloudio/uni-app';
  import { ref, computed } from 'vue';
  import type { gridData, gridType, offseType } from '.';

  // 胶囊右间隔
  const capsuleRightInterval = ref<number>(uni.getWindowInfo().safeArea.right - uni.getMenuButtonBoundingClientRect().right);
  // 胶囊盒子高度
  const capsuleBoxHeight = ref<number>(uni.getMenuButtonBoundingClientRect().height);
  // 胶囊盒子宽度
  const capsuleBoxWitdh = ref<number>(uni.getWindowInfo().safeArea.width - 2 * capsuleRightInterval.value);
  // 头部高度
  const headHeight = ref<number>(uni.getMenuButtonBoundingClientRect().bottom + capsuleRightInterval.value);
  // 身体高度
  const bodyHeight = ref<number>(uni.getWindowInfo().safeArea.bottom - headHeight.value);
  // 尾巴高度
  const tailHeight = ref<number>(uni.getWindowInfo().screenHeight - uni.getWindowInfo().safeArea.bottom);
  // 网格
  const grid = ref<gridData[]>([]);
  // 网格宽度
  const gridBoxWidth = ref<number>(0);
  // 网格高度
  const gridBoxHeight = ref<number>(0);
  // 预言网格
  const prophetGrid = ref<gridData[]>([]);
  // 预言家方块类型
  let prophetGridType = 0;
  // 网格宽度
  const prophetGridBoxWidth = ref<number>(0);
  // 网格高度
  const prophetGridBoxHeight = ref<number>(0);
  // 颜色组
  const color = ['black', 'red', 'blue', 'yellow', 'green', 'orange', 'palevioletred', 'purple'];
  // 等级
  const level = ref<number>(0);
  // 加速步长
  const speedStep = 0.1;
  // 分数
  const score = ref<number>(0);
  // 时间-分
  const minute = ref<number>(0);
  // 秒
  const second = ref<number>(0);
  // 总秒数
  let allSecond = 0;
  // 开始了吗
  const start = ref<number>(0);
  // 吃饭进度,如果到一定值就会触发运行
  let food = 0;
  // 方块组
  const blocks = [
    {
      offset: {
        big: {
          x: -2,
          y: 4,
        },
        small: {
          x: 1,
          y: 0,
        },
      },
      rotate: 0,
      data: [
        {
          id: 0,
          x: [1, -1, 1, -1],
          y: [0, 1, 0, 1],
          color: color[1],
        },
        {
          id: 1,
          x: [1, 0, 1, 0],
          y: [1, 1, 1, 1],
          color: color[1],
        },
        {
          id: 2,
          x: [0, 0, 0, 0],
          y: [1, 2, 1, 2],
          color: color[1],
        },
        {
          id: 3,
          x: [0, 1, 0, 1],
          y: [2, 2, 2, 2],
          color: color[1],
        },
      ],
    },
    {
      offset: {
        big: {
          x: -4,
          y: 5,
        },
        small: {
          x: 0,
          y: 1,
        },
      },
      rotate: 0,
      data: [
        {
          id: 0,
          x: [0, 2, 0, 2],
          y: [0, -1, 0, -1],
          color: color[2],
        },
        {
          id: 1,
          x: [1, 2, 1, 2],
          y: [0, 0, 0, 0],
          color: color[2],
        },
        {
          id: 2,
          x: [2, 2, 2, 2],
          y: [0, 1, 0, 1],
          color: color[2],
        },
        {
          id: 3,
          x: [3, 2, 3, 2],
          y: [0, 2, 0, 2],
          color: color[2],
        },
      ],
    },
    {
      offset: {
        big: {
          x: -2,
          y: 4,
        },
        small: {
          x: 1,
          y: 1,
        },
      },
      rotate: 0,
      data: [
        {
          id: 0,
          x: [0, 0, 0, 0],
          y: [0, 0, 0, 0],
          color: color[3],
        },
        {
          id: 1,
          x: [0, 0, 0, 0],
          y: [1, 1, 1, 1],
          color: color[3],
        },
        {
          id: 2,
          x: [1, 1, 1, 1],
          y: [0, 0, 0, 0],
          color: color[3],
        },
        {
          id: 3,
          x: [1, 1, 1, 1],
          y: [1, 1, 1, 1],
          color: color[3],
        },
      ],
    },
    {
      offset: {
        big: {
          x: -2,
          y: 4,
        },
        small: {
          x: 1,
          y: 0,
        },
      },
      rotate: 0,
      data: [
        {
          id: 0,
          x: [0, -1, 0, -1],
          y: [0, 1, 0, 1],
          color: color[4],
        },
        {
          id: 1,
          x: [0, 0, 0, 0],
          y: [1, 0, 1, 0],
          color: color[4],
        },
        {
          id: 2,
          x: [1, 0, 1, 0],
          y: [1, 1, 1, 1],
          color: color[4],
        },
        {
          id: 3,
          x: [1, 1, 1, 1],
          y: [2, 0, 2, 0],
          color: color[4],
        },
      ],
    },
    {
      offset: {
        big: {
          x: -3,
          y: 4,
        },
        small: {
          x: 1,
          y: 0,
        },
      },
      rotate: 0,
      data: [
        {
          id: 0,
          x: [0, 1, 0, 2],
          y: [0, 0, 0, 0],
          color: color[5],
        },
        {
          id: 1,
          x: [1, 1, 0, 2],
          y: [0, 1, 1, 1],
          color: color[5],
        },
        {
          id: 2,
          x: [2, 1, 1, 2],
          y: [0, 2, 1, 2],
          color: color[5],
        },
        {
          id: 3,
          x: [2, 2, 2, 1],
          y: [1, 0, 1, 2],
          color: color[5],
        },
      ],
    },
    {
      offset: {
        big: {
          x: -3,
          y: 4,
        },
        small: {
          x: 1,
          y: 0,
        },
      },
      rotate: 0,
      data: [
        {
          id: 0,
          x: [0, 1, 0, 1],
          y: [1, 0, 0, 0],
          color: color[6],
        },
        {
          id: 1,
          x: [1, 2, 0, 1],
          y: [1, 0, 1, 1],
          color: color[6],
        },
        {
          id: 2,
          x: [2, 2, 1, 1],
          y: [1, 1, 0, 2],
          color: color[6],
        },
        {
          id: 3,
          x: [2, 2, 2, 2],
          y: [0, 2, 0, 2],
          color: color[6],
        },
      ],
    },
    {
      offset: {
        big: {
          x: -2,
          y: 4,
        },
        small: {
          x: 1,
          y: 0,
        },
      },
      rotate: 0,
      data: [
        {
          id: 0,
          x: [0, -1, 0, -1],
          y: [0, 1, 0, 1],
          color: color[7],
        },
        {
          id: 1,
          x: [0, 0, 0, 0],
          y: [1, 1, 1, 1],
          color: color[7],
        },
        {
          id: 2,
          x: [0, 1, 0, 1],
          y: [2, 1, 2, 1],
          color: color[7],
        },
        {
          id: 3,
          x: [1, 0, -1, 0],
          y: [1, 0, 1, 2],
          color: color[7],
        },
      ],
    },
  ];
  // 主网格下移值
  const gridDown = ref<number>(0);
  // 主网格水平移值
  const gridHorizontal = ref<number>(0);
  // 主网格动感配置
  const gridTrans = ref<string>('none');
  // 运动方块组
  let motionBlock = JSON.parse(JSON.stringify(blocks[6]));
  // 静态方块组
  let staticBlock: gridData[] = [];
  // 可向下值
  let downValueNow = 20;
  // 是否结束
  const isOver = ref<boolean>(false);

  // 深拷贝
  const deepCopy = (data: any) => {
    return JSON.parse(JSON.stringify(data));
  };

  // 网格垂直动感
  const gridVerticalDynamic = () => {
    gridDown.value = 15;
    setTimeout(() => {
      gridTrans.value = 'all 0.3s ease-in-out';
      gridDown.value = 0;
      setTimeout(() => {
        gridTrans.value = 'none';
      }, 300);
    }, 100);
  };

  // 网格水平动感
  const gridHorizontalDynamic = (direction: number) => {
    gridHorizontal.value = direction * 5;
    setTimeout(() => {
      gridTrans.value = 'all 0.3s ease-in-out';
      gridHorizontal.value = 0;
      setTimeout(() => {
        gridTrans.value = 'none';
      }, 300);
    }, 100);
  };

  // 将总秒数转为多少分钟多少秒
  const formatSeconds = (seconds: number) => {
    minute.value = Math.floor(seconds / 60);
    second.value = seconds % 60;
  };
  // 运行左
  const runLeft = () => {
    console.log('运行左');
    motionBlock.offset.big.y--;
    painterOnAll(0, 1);
  };
  // 运行右
  const runRight = () => {
    console.log('运行右');
    motionBlock.offset.big.y++;
    painterOnAll(0, -1);
  };
  // 运行下
  const runDown = () => {
    console.log('运行下');
    motionBlock.offset.big.x++;
    painterOnAll(-1, 0);
  };
  // 运行旋转
  const runTurn = () => {
    console.log('运行旋转');
    motionBlock.rotate = ++motionBlock.rotate % 4;
    painterOnAll(0, 0, -1);
  };
  // 运行快速下
  const runDownNow = () => {
    console.log('运行快速下降');
    motionBlock.offset.big.x += downValueNow;
    painterOnAll(-downValueNow, 0);
    runDown();
    gridVerticalDynamic();
  };
  // 点击左
  const tapLeft = () => {
    if (start.value === 1 && !isOver.value) {
      console.log('点击左');
      runLeft();
    }
  };
  // 点击右
  const tapRight = () => {
    if (start.value === 1 && !isOver.value) {
      console.log('点击右');
      runRight();
    }
  };
  // 点击下
  const tapDown = () => {
    if (start.value === 1 && !isOver.value) {
      console.log('点击下');
      runDown();
    }
  };
  // 点击旋转
  const tapTurn = () => {
    if (start.value === 1 && !isOver.value) {
      console.log('点击旋转');
      runTurn();
    }
  };
  // 点击快速下
  const tapDownNow = () => {
    if (start.value === 1 && !isOver.value) {
      console.log('点击快速下降');
      runDownNow();
    }
  };
  // 初始化网格宽度百分比
  const getGridBoxWidth = () => {
    const difference = pxToRpx(91);
    const gridBoxWidthValue = (pxToRpx(bodyHeight.value) - difference) / 2 / 750;
    let gridBoxWidth1 = uni.getWindowInfo().safeArea.width * gridBoxWidthValue;
    let gridBoxWidth2 = ((uni.getWindowInfo().safeArea.width - rpxToPx(28) - capsuleRightInterval.value * 3) * 10) / 12.5;
    gridBoxWidth.value = Math.min(gridBoxWidth1, gridBoxWidth2);
    gridBoxHeight.value = gridBoxWidth.value * 2;
    prophetGridBoxWidth.value = uni.getWindowInfo().safeArea.width - gridBoxWidth2 - capsuleRightInterval.value * 3 - rpxToPx(28);
    prophetGridBoxHeight.value = (4 * prophetGridBoxWidth.value) / 3;
  };

  // 初始化预言网格
  const initProphetGrid = () => {
    prophetGrid.value = [];
    for (let i = 0; i < 4; i++) {
      for (let j = 0; j < 3; j++) {
        prophetGrid.value.push({
          id: prophetGrid.value.length,
          x: i,
          y: j,
          color: color[0],
        });
      }
    }
  };

  // 初始化网格
  const initGrid = () => {
    grid.value = [];
    for (let i = 0; i < 20; i++) {
      for (let j = 0; j < 10; j++) {
        grid.value.push({
          id: grid.value.length,
          x: i,
          y: j,
          color: color[0],
        });
      }
    }
  };

  /**
   * 将px转换为rpx
   * @param value
   */
  const pxToRpx = (value: number) => {
    return (750 / uni.getWindowInfo().safeArea.width) * value;
  };

  /**
   * 将rpx转换为px
   * @param value
   */
  const rpxToPx = (value: number) => {
    return (uni.getWindowInfo().safeArea.width / 750) * value;
  };

  // 点击重来
  const reGame = () => {
    console.log('重新开始');
    start.value = 0;
    food = 0;
    score.value = 0;
    level.value = 0;
    minute.value = 0;
    second.value = 0;
    allSecond = 0;
    initGrid();
    initProphetGrid();
    motionBlock = {};
    staticBlock = [];
    isOver.value = false;
  };

  // 点击开始/暂停按钮
  const tapStart = () => {
    switch (start.value) {
      // 点击开始
      case 0:
        start.value = 1;
        food = 0;
        newMotionBlock();
        break;
      // 点击暂停
      case 1:
        start.value = 2;
        break;
      // 点击继续
      case 2:
        start.value = 1;
        break;
    }
    console.log('是否开始', start.value);
  };

  // 时间
  const timeRun = () => {
    setInterval(() => {
      food++;
      if (food >= 1000 * Math.pow(1 - speedStep, level.value)) {
        if (start.value === 1) {
          runDown();
        }
        food = 0;
      }
    }, 1);
  };

  // 钟
  const clock = () => {
    setInterval(() => {
      if (start.value === 1) {
        allSecond++;
        formatSeconds(allSecond);
      }
    }, 1000);
  };

  // 偏移方块组
  const offsetBlock = (data: gridType, offse: offseType, rotate: number) => {
    const y: number[] = [];
    let showOffset = 0;
    data.forEach((item) => {
      y.push(item.y[rotate] + offse.y);
    });
    const minY = y.sort((a, b) => a - b)[0];
    const maxY = y.sort((a, b) => b - a)[0];
    if (minY < 0) {
      gridHorizontalDynamic(-1);
      showOffset = Math.abs(minY);
    }
    if (maxY > 9) {
      gridHorizontalDynamic(1);
      showOffset = 9 - maxY;
    }
    offse.y = offse.y + showOffset;
    let temp = data.map((item) => {
      return {
        ...item,
        x: item.x[rotate] + offse.x,
        y: item.y[rotate] + offse.y,
      };
    });
    return temp;
  };

  // 画家
  const painter = (canvas: gridData[], colour: any[]) => {
    canvas.map((canvasItem) => {
      canvasItem.color = color[0];
    });
    colour.forEach((colourItem: { x: number; y: number; color: string }) => {
      canvas.forEach((canvasItem) => {
        if (canvasItem.x === colourItem.x && canvasItem.y === colourItem.y) {
          canvasItem.color = colourItem.color;
        }
      });
    });
    return canvas;
  };

  // 绘制全部
  const painterOnAll = (restoreX: number, restoreY: number, restoreRoutate: number = 0) => {
    // 获取有效绘制点
    let temp = offsetBlock(motionBlock.data, motionBlock.offset.big, motionBlock.rotate);
    // 绘制静态
    grid.value = painter(grid.value, [...staticBlock]);
    // 检查下落值
    downValueNow = inspectDownValue(temp);
    // 触底
    if (downValueNow < 0) {
      // 无法变化
      motionBlock.offset.big.x += restoreX;
      motionBlock.offset.big.y += restoreY;
      motionBlock.rotate += restoreRoutate;
      temp = offsetBlock(motionBlock.data, motionBlock.offset.big, motionBlock.rotate);
      // 绘制全部
      grid.value = painter(grid.value, [...staticBlock, ...temp]);
      if (restoreY === 0 && restoreRoutate === 0) {
        staticBlock.push(...temp);
        staticBlock = deepCopy(staticBlock);
        temp = [];
        // 绘制全部
        grid.value = painter(grid.value, [...staticBlock, ...temp]);
        // 检查得分
        getScore();
        // 移动结束换一下个
        newMotionBlock();
      }
    }
    // 绘制全部
    grid.value = painter(grid.value, [...staticBlock, ...temp]);
    // 检查是否结束
    isOverFn();
  };

  // 检查是否结束
  const isOverFn = () => {
    isOver.value = false;
    for (let i = 0; i < 10; i++) {
      staticBlock.forEach((stItem) => {
        if (stItem.x === 0 && stItem.y === i) {
          if (stItem.color !== 'black') {
            isOver.value = true;
            tapStart();
          }
        }
      });
    }
  };

  // 检查得分
  const getScore = () => {
    const scores = [];
    const getScores = [40, 100, 300, 800];
    for (let i = 0; i < 20; i++) {
      let isScore = true;
      for (let j = 0; j < 10; j++) {
        const target = grid.value[i * 10 + j];
        if (target.color === 'black') {
          isScore = false;
        }
      }
      if (isScore) {
        scores.push(i);
      }
    }
    if (scores.length > 0) {
      // 计分
      score.value += getScores[scores.length - 1] * (level.value + 1);
      let longmen = 0;
      for (let i = 0; i <= level.value; i++) {
        getScores.forEach((gsItem) => {
          longmen += gsItem * (i + 1);
        });
      }
      if (score.value >= longmen) {
        level.value++;
      }
      eliminate(scores);
    }
  };

  // 方块消除
  const eliminate = (rows: number[]): Promise<void> => {
    return new Promise(async (resolve) => {
      // 1. 收集要消除的方块
      const eliminatedBlocks: gridData[] = [];
      const indexesToRemove: number[] = [];
      // 从后往前遍历，避免splice导致索引错乱
      for (let y = 9; y >= 0; y--) {
        rows.forEach((row) => {
          const index = staticBlock.findIndex((block) => block.x === row && block.y === y);
          if (index !== -1) {
            eliminatedBlocks.push({ ...staticBlock[index] });
            indexesToRemove.push(index);
          }
        });
      }
      // 2. 先移除方块（第一次渲染）
      indexesToRemove
        .sort((a, b) => b - a)
        .forEach((index) => {
          staticBlock.splice(index, 1);
        });
      grid.value = painter(grid.value, staticBlock);
      // 3. 短暂延迟后显示消除动画
      await delay(100);
      // 4. 重新绘制包含临时消除方块的画面（闪烁效果）
      grid.value = painter(grid.value, [...eliminatedBlocks, ...staticBlock]);
      // 5. 再次延迟后完全移除
      await delay(100);
      const minRow = rows.sort((a, b) => a - b)[0];
      staticBlock.forEach((stItem) => {
        if (stItem.x < minRow) {
          stItem.x += rows.length;
        }
      });
      grid.value = painter(grid.value, staticBlock);
      resolve();
    });
  };

  // 阻塞
  const delay = (ms: number | undefined) => new Promise((resolve) => setTimeout(resolve, ms));

  // 运动方块组换新
  const newMotionBlock = () => {
    motionBlock = deepCopy(blocks[prophetGridType]);
    // 获取有效绘制点
    let temp = offsetBlock(motionBlock.data, motionBlock.offset.big, motionBlock.rotate);
    // 检查下落值
    downValueNow = inspectDownValue(temp);
    prophetGridType = Math.floor(Math.random() * 7);
    prophetGrid.value = painter(
      prophetGrid.value,
      offsetBlock(blocks[prophetGridType].data, blocks[prophetGridType].offset.small, blocks[prophetGridType].rotate),
    );
  };

  // 检查下落值
  const inspectDownValue = (data: any[]) => {
    const yValue: number[] = [];
    data.forEach((dItem: any) => {
      let yValueTemp = 0;
      for (let i = dItem.x; i < 20; i++) {
        if (grid.value[i * 10 + dItem.y]?.color === 'black' || grid.value[i * 10 + dItem.y] === undefined) {
          yValueTemp++;
        } else {
          break;
        }
      }
      yValue.push(yValueTemp - 1);
    });
    return yValue.sort((a, b) => a - b)[0];
  };

  onLoad(() => {
    console.log('Index Load');
    initGrid();
    initProphetGrid();
    getGridBoxWidth();
    timeRun();
    clock();
  });
  onShow(() => {
    console.log('Index Show');
  });
  onHide(() => {
    console.log('Index Hide');
  });

  const startBtnName = computed(() => {
    switch (start.value) {
      case 0:
        return '开 始';
      case 1:
        return '暂 停';
      case 2:
        return '继 续';
    }
  });
</script>

<style>
  .overture {
    width: 100vw;
    height: 100vh;
    background-color: brown;
  }
  .head {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
  }
  .capsule-box {
    width: 100%;
  }
  .body {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .game-content {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
  }
  .grid-box {
    border: 8rpx solid rgb(178, 70, 70);
    background-color: rgb(20, 20, 20);
    display: grid;
    grid-template-columns: repeat(10, 1fr); /* 10列 */
    grid-template-rows: repeat(20, 1fr); /* 20行 */
    gap: 4rpx;
  }
  .grid-right {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .prophet {
    width: 100%;
    border: 6rpx solid rgb(178, 70, 70);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 1fr);
    background-color: rgb(20, 20, 20);
  }
  .data {
    width: 100%;
    border: 6rpx solid rgb(178, 70, 70);
    background-color: black;
    display: flex;
    align-items: center;
    flex-direction: column;
  }
  .data > view {
    color: wheat;
  }
  .title {
    font-size: 32rpx;
  }
  .content {
    font-size: 28rpx;
  }
  .score {
    text-align: center;
    width: 80%;
    display: block; /* 或 inline-block */
    word-wrap: break-word;
    overflow-wrap: break-word; /* 更推荐 */
    white-space: normal; /* 确保不强制单行 */
  }
  .ad {
    width: 100%;
    border: 6rpx solid rgb(178, 70, 70);
    flex: auto;
  }
  .game-btn {
    width: 100%;
    border: 6rpx solid rgb(178, 70, 70);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80rpx;
    background-color: wheat;
    cursor: pointer;
    font-size: 32rpx;
    font-weight: 800;
  }
  .game-btn:active {
    background-color: rgb(181, 176, 166);
  }
  .cmd {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 50rpx;
  }
  .cmd-btn {
    border: 6rpx solid rgb(178, 70, 70);
    width: 100%;
    background-color: wheat;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1/1;
    font-size: 55rpx;
  }
  .cmd-btn:active {
    background-color: rgb(181, 176, 166);
  }
  .tail {
    width: 100%;
  }
</style>
